const React = require('react');
import {browserHistory} from 'react-router';
const BookCategoryMenu=require('./bookCategoryMenu.jsx');
const BookSearchForm=require('./bookSearchForm.jsx');
const BookCategoryItem=require('./bookCategoryItem.jsx');
const $=require('jquery');
import {Link}  from 'react-router';

var page = React.createClass({
     getInitialState:function(){
        return{
            typeid:0,
            typename:'',
            pageindex:1,
            loading:false,
            bookList:[],
            totalLoad:false
        }
    },
    
    componentWillMount :function(){   
        window.scrollTo(0,0);       
    },
    componentWillUnmount:function(){
        console.log("移除组件");
    },
    componentWillReceiveProps:function(nextProps){
        let typeid=this.props.params.typeid;
        // 接收的typeid与state里的比较，如果不同，则render
        let oldTypeid=this.state.typeid;
        console.log("componentWillReceiveProps",typeid,oldTypeid);
        if(typeid!=oldTypeid)
        {
            this.setState({
                typeid:typeid,
                pageindex:1
            })    
            this.getData(true,typeid);
        }
    },
    componentDidMount :function(){
        let typeid=this.props.params.typeid;
        this.setState({
            typeid:typeid
        })  
        this.getData(true,typeid);
    },
    routerWillLeave:function(nextLocation) {
        console.log("routerWillLeave",nextLocation);
    },
    getData:function(isInit,typeid){
        let loading=this.state.loading;
        if(loading)
            return;
        this.setState({
            loading:true
        })
        let postData={
            typeid:typeid,
            idx:this.state.pageindex
        };
        console.log("postData",postData);

        let bookList=this.state.bookList;
        $.ajax({
            type: "POST",
            url: "http://localhost:3125/ApiBook/GetBooksByCategory",
            dataType: "json",
            data: postData,
            success: function (result) { 
                console.log("result",result)   
                if(result.books.length>0)
                {
                    if(isInit)
                        bookList=result.books;
                    else
                        bookList=bookList.concat(result.books);
                    this.setState({
                        loading:false,
                        typename:result.typeName,
                        pageindex:(this.state.pageindex+1),
                        bookList:bookList
                    });
                }  
                else
                {
                      if(isInit)
                        bookList=[];
                    this.setState({
                        typename:result.typeName,
                        loading:false,
                        totalLoad:true,
                        bookList:bookList
                    })
                }                              
                
            }.bind(this)
        });
    },
    loadNextPage:function(){
        let typeid=this.state.typeid;
        this.getData(false,typeid);
    },
    render: function () {  
        let btnLoad;
        if(!this.state.totalLoad)
        {
            btnLoad=<p className="am-text-center"><a onClick={this.loadNextPage} className="am-btn btnTheme am-center"><i className="am-icon-refresh"></i> 加载更多</a></p>
        }
        else
        {
            btnLoad=<p className="am-text-center"><a className="am-btn btnTheme am-center"><i className="am-icon-refresh"></i> 没有了！</a></p>
        }
        return (    
            <div className="chapter">
                <BookCategoryMenu />
                <BookSearchForm />
                <div className="chapter">
                    <dl className="am-cf sorttitle">
                        <dt>{this.state.typename}</dt>                        
                    </dl>
                    <div className="bookBox">
                        {
                            this.state.bookList.map(function(item,index){
                                return(
                                        <BookCategoryItem book={item} key={'bk'+index} />
                                    )
                            })                        
                        }                        
                    </div>
                    {btnLoad}                
                </div>
            </div>
        );
      }
});

module.exports = page;


